<template>
  <div class="banner-container">
    <ScenicScreen v-model="list.filter.scenicId" :isAll="false" />
    <div class="app-container">
      <el-form
        class="list-filter"
        ref="listFilterRef"
        :model="list.filter"
        inline
      >
        <el-form-item prop="name">
          <el-input
            v-model="list.filter.name"
            placeholder="标签名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="status">
          <Status v-model="list.filter.status" />
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <div class="table-operation">
        <span>
          <AuthButton @click="c" name="新增" v-show="list.filter.scenicId" />
          <AuthButton
            @click="defaultLabel()"
            name="默认标签页"
            v-show="list.filter.scenicId"
          />
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>
      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="标签名称" prop="name" />
        <el-table-column label="展示顺序" prop="sort" />
        <el-table-column label="拉取方式" prop="productType">
          <template slot-scope="{ row }">
            {{ row.productType | $value2label(productTypes) }}
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="80" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <auth-button @click="r({ id: row.id })" name="查看" />
            <auth-button @click="u({ id: row.id })" name="编辑" />
            <auth-button @click="d({ id: row.id })" name="删除" />
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
        width="70%"
      >
        <template #el-form>
          <el-form-item label="名称" prop="name" :verify="{ maxLength: 7 }">
            <el-input
              v-model="form.data.name"
              placeholder="标签名称"
              maxlength="7"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="展示顺序" prop="sort" verify>
            <Sort v-model="form.data.sort" />
          </el-form-item>
          <el-form-item label="标签页展示所属景区" prop="scenicId" verify>
            <ScenicSpot
              v-model="form.data.scenicId"
              v-if="form.show"
              isSingle
              :maxLength="1"
              disabled
            />
          </el-form-item>
          <el-form-item label="商品拉取方式" prop="productType" verify>
            <KiSelect
              v-model="form.data.productType"
              :options="productTypes"
              placeholder="商品拉取方式"
            />
          </el-form-item>
          <el-form-item
            v-if="form.data.productType"
            :label="form.data.productType == '1' ? '选择商品' : '选择分类'"
            prop="relationIds"
            verify
          >
            <BoundGoods
              v-model="form.data.relationIds"
              v-if="form.data.productType == '1'"
            />
            <CategorySelect
              v-model="form.data.relationIds"
              :props="{ multiple: true }"
              v-if="form.data.productType == '2'"
            />
          </el-form-item>
        </template>
      </KiFormDialog>

      <KiFormDialog
        :show.sync="dLabelModel.show"
        title="默认标签页"
        v-model="dLabelModel.data"
        :submit="submitDLabel"
        :retrieve="getDLabel"
        width="50%"
      >
        <template #el-form>
          <el-form-item label="名称" prop="name" :verify="{ maxLength: 7 }">
            <el-input
              v-model="dLabelModel.data.name"
              placeholder="标签名称"
              maxlength="7"
              show-word-limit
              clearable
            />
            <form-item-tip>
              若景区没有配置任何标签页，则自动使用默认标签页
            </form-item-tip>
            <form-item-tip>
              若景区配置有标签页，则对应景区的默认标签页不生效
            </form-item-tip>
            <form-item-tip>
              默认标签页会拉取景区关联的所有店铺下的所有商品，按销量排序
            </form-item-tip>
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import BoundGoods from '@/components/BoundGoods'
import CategorySelect from '@/components/CategorySelect'
import ScenicSpot from '@/components/ScenicSpot'
import ScenicScreen from '@/components/ScenicScreen'

export default {
  mixins: [pageMixin],
  components: {
    ScenicSpot,
    ScenicScreen,
    CategorySelect,
    BoundGoods
  },
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'sot-admin-api/merchant/merchant-label-scenic',
        form: {
          data: {
            scenicId: ''
          }
        }
      },
      {
        getListInitially: false //默认不请求
      }
    ),
  watch: {
    'form.data.productType' (n, o) {
      if (n && o !== undefined) {
        this.form.data.relationIds = []
      }
    },
    'form.show' (n) {
      if (n) {
        this.form.data.scenicId = this.list.filter.scenicId
      }
    }
  },
  data () {
    return {
      productTypes: [
        { dataValue: 1, dataName: '手动拉取' },
        { dataValue: 2, dataName: '按商品分类拉取' }
      ],
      dLabelModel: {
        show: false,
        data: {}
      }
    }
  },
  methods: {
    defaultLabel () {
      this.dLabelModel = {
        show: true,
        data: { name: '', labelType: '2' }
      }
    },
    getDLabel () {
      // 获取设置过的默认标签
      return this.$POST(
        '/sot-admin-api/merchant/merchant-label-default/queryForDetail',
        { labelType: '2' }
      ).then(res => {
        if (res.data) {
          this.dLabelModel.data = res.data
        }
      })
    },
    submitDLabel () {
      return this.$POST(
        '/sot-admin-api/merchant/merchant-label-default/updateOrInsert',
        this.dLabelModel.data
      ).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('提交成功')
          this.dLabelModel.show = false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.banner-container {
  display: flex;
  .app-container {
    flex: 1;
  }
}
</style>
